<template>
  <div>
    <span > 商品类型上架图   </span>
    <el-row>
      <el-col :span="16">
        <div class="echart" id="mychart" :style="myChartStyle"></div>
      </el-col>
      <el-col :span="8">
    <div style=" padding: 10px 20px;box-sizing: border-box;">
    <PieChart fontColor="#fff" bag="#2f90b9" tag="商品基础数据" :values="pieValues" :types="pieTypes" />
     </div>
      </el-col>

    </el-row>
    <span > 商品类型销量图   </span>
    <el-row>

      <el-col :span="16">

        <div class="echart" id="mychart2" :style="myChartStyle2"></div>
      </el-col>
      <el-col :span="8">
        <div style=" padding: 10px 20px;box-sizing: border-box;">
          <PieChart fontColor="#fff" bag="#2f90b9" tag="商品类型销量数据" :values="pieValues2" :types="pieTypes2" />
        </div>
      </el-col>

    </el-row>

  </div>
</template>
<script>
import PieChart from "@/components/PieChart";
import * as echarts from "echarts"
export default {
  components: { PieChart  },
  data() {
    return {

      pieValues: [],
      pieTypes: [],
      productQueryDto:{},
      xData: [], //横坐标
      yData: [], //数据
      myChartStyle: { float: "left", width: "100%", height: "400px" }, //图表样式
      pieValues2: [],
      pieTypes2: [],
      xData2: [], //横坐标
      yData2: [], //数据
      myChartStyle2: { float: "left", width: "100%", height: "400px" } //图表样式
    };
  },
  created() {
   this.loadPieCharts()
    this.loadPieCharts2()
  },
  mounted() {
    this.initEcharts();
    this.initEcharts2();
  },
  methods: {
    loadPieCharts() {
      this.$axios.get(`/views/staticControls`).then(response => {
        const { data } = response;
        if (data.code === 200) {
          this.pieValues = data.data.map(entity => entity.count);
          this.pieTypes = data.data.map(entity => entity.name);
          this.xData = this.pieTypes;
            this.yData = this.pieValues
          this.initEcharts();
        }
      })
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    loadPieCharts2() {
      this.$axios.get(`/viewsB/staticControls`).then(response => {
        const { data } = response;
        if (data.code === 200) {
          this.pieValues2 = data.data.map(entity => entity.count);
          this.pieTypes2 = data.data.map(entity => entity.name);
          this.xData2 = this.pieTypes2;
          this.yData2 = this.pieValues2;
          this.initEcharts2();
        }
      })
    },
    initEcharts2() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.xData2
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.yData2
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart2"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  }
};
</script>
<style scoped lang="scss">

</style>